<script setup>
import { getTodayStock } from '@/api/visual/index'
import { alikeKeyGetAll } from '@/utils/globalMethod'
import { formatMoney } from '@/utils/globalMethod'

const todayStockData = ref({ drck: 0, drrk: 0, drwf: 0 })

const loadData = async () => {
  /* 获取今日的库存情况 */
  const { data: todayStock } = await getTodayStock()
  todayStockData.value.drck = alikeKeyGetAll(todayStock, 'drck')
  todayStockData.value.drrk = alikeKeyGetAll(todayStock, 'drrk')
  todayStockData.value.drwf = alikeKeyGetAll(todayStock, 'drwf')
}

onMounted(loadData)
</script>

<template>
  <div class="ps_w_h_100 header">
    <ps-borderbox3 background-color="#002840" :show-shadow="false">
      <div class="stock">
        <h3>入库总量（件）</h3>
        <div class="stockDesc">
          <div class="icon">
            <el-icon size="40" color="#1fb673"><Discount /></el-icon>
          </div>
          <div class="text">{{ formatMoney(null, todayStockData.drrk) }}</div>
        </div>
      </div>
    </ps-borderbox3>
    <ps-borderbox3 style="margin: 0 10px" background-color="#3a1443" :show-shadow="false">
      <div class="stock">
        <h3>出库总量（件）</h3>
        <div class="stockDesc">
          <div class="icon">
            <el-icon size="40" color="#f24f7d"><UploadFilled /></el-icon>
          </div>
          <div class="text">{{ formatMoney(null, todayStockData.drck) }}</div>
        </div>
      </div>
    </ps-borderbox3>
    <ps-borderbox3 background-color="#0d2263" :show-shadow="false">
      <div class="stock">
        <h3>待发货单（笔）</h3>
        <div class="stockDesc">
          <div class="icon">
            <el-icon size="40" color="#4f8af7"><Promotion /></el-icon>
          </div>
          <div class="text">{{ todayStockData.drwf }}</div>
        </div>
      </div>
    </ps-borderbox3>
  </div>
</template>

<style scoped lang="scss">
.header {
  flex: 1;
  display: flex;
  justify-content: space-between;

  .f-wh-4-s1 {
    width: 32%;
  }

  .stock {
    width: 100%;
    height: 100%;

    h3 {
      text-align: center;
    }

    .stockDesc {
      display: flex;
      align-items: center;
      justify-content: center;
      .icon {
        margin-right: 8px;
      }

      .text {
        font-size: 40px;
        color: #04975d;
        font-weight: 700;
      }
    }
  }
}
</style>
